<template>
    <div>
        <ul>
            <!-- <li>{{ selectList }}</li> -->
            <router-link :to="item.menuUrl" custom v-slot="{ navigate }" v-for="(item, index) of selectList">
                <li @click="navigate" @mousedown="select(index)" @keypress.enter="navigate" role="link" class="link"
                    :class="[selectedItem == index ? '_active' : '']">
                    <span :class="item.menuImgClass"></span>{{ item.menuName }}
                </li>
            </router-link>
            <!-- {
              menuId: 11,
              menuName: "患者库",
              menuUrl: "/treat/patientList",
              componentName:"patientList",
              menuImgClass: '',
              menuChilds: [],
              componentView:"Treat/PatientList"
            }, -->

        </ul>
    </div>
</template>

<script lang="ts">
import { defineComponent, toRefs, computed, ref, onMounted, onBeforeMount } from 'vue'
import { useStore } from "vuex"

export default defineComponent({
    props: {
        selected: String
    },
    setup(props) {
        const store = useStore();
        const { selected } = toRefs(props);
        const selectedItem = ref(0)
        const selectList = computed(() => {
            let menuInfo = store.state.router.userData.menuInfo;
            if (menuInfo.length > 0) {//proxy代替了object
                menuInfo = JSON.parse(JSON.stringify(menuInfo))
            }
            let result;
            menuInfo.forEach((item: any) => {
                if (item.menuName == selected.value) {
                    result = item.menuChilds
                }
            })
            return result;
        })
        const select = (index: any) => {
            selectedItem.value = index
            console.log(index);

        }
        return { selected, selectList, selectedItem, select }
    },

})
</script>

<style scoped>
ul {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
    text-align: left;
}

.link {
    overflow: hidden;
    flex-wrap: nowrap;
    box-sizing: border-box;
    border-left: 5px solid transparent;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 18px 30px;
    width: 100%;
    height: 60px;
    color: #AEB7C2;
    ;
    background-color: #2b333e;
    transition: all .2s ease-in;
    /* outline: 1px solid red; */
}

.link:hover {
    color: #fff;
    background-color: #252c35;
}

._active {
    border-left: 5px solid #00aaff;
    color: #fff;
    background-color: #252c35;
}

.iconfont {
    font-size: 20px;
    padding: 4px;
}

._active>.iconfon {
    color: #00aaff;
}

.iconfont:hover {
    color: #00aaff;
}</style>